<div class="dashboard">
    <row v-if="isEnableCustomized">
        <app-build @handleClick="handleClick.apply(_self, arguments)"></app-build>
    </row>
    <row v-if="!isHasCustomized">
            <i-col :md="{ span: 16, offset: 0 }" :lg="{ span: 16, offset: 0 }">
                <card class="portlet-card" :bordered="false" dis-hover :padding="0">
                    <span>
                                  <view_db_sysportlet1 
              :viewState="viewState"  
              :viewparams="viewparams" 
              :context="context" 
              :height="300"
              :width="0"
              name="db_sysportlet1"  
              ref="db_sysportlet1" 
              @closeview="closeView($event)">
          </view_db_sysportlet1>
                    </span>
                </card>
            </i-col>
            <i-col :md="{ span: 8, offset: 0 }" :lg="{ span: 8, offset: 0 }">
                <card class="portlet-card" :bordered="false" dis-hover :padding="0">
                    <span>
                                  <view_db_sysportlet3 
              :viewState="viewState"  
              :viewparams="viewparams" 
              :context="context" 
              :height="0"
              :width="0"
              name="db_sysportlet3"  
              ref="db_sysportlet3" 
              @closeview="closeView($event)">
          </view_db_sysportlet3>
                    </span>
                </card>
            </i-col>
            <i-col :md="{ span: 16, offset: 0 }" :lg="{ span: 16, offset: 0 }">
                <card class="portlet-card" :bordered="false" dis-hover :padding="0">
                    <span>
                                  <view_db_sysportlet2 
              :viewState="viewState"  
              :viewparams="viewparams" 
              :context="context" 
              :height="300"
              :width="0"
              name="db_sysportlet2"  
              ref="db_sysportlet2" 
              @closeview="closeView($event)">
          </view_db_sysportlet2>
                    </span>
                </card>
            </i-col>
    </row>
    <row v-if="isHasCustomized" style="width: 100%;min-height: calc(100% - 40px);">
        <div class="portlet-container" style="position: relative;width:100%;">
            <template v-for="(item, index) of modelDta">
                <div :key="index" :style="{zIndex: 10, position: 'absolute', height: item.h*layoutRowH + 'px', width: `calc(100% / ${layoutColNum} * ${item.w})`,top: item.y*layoutRowH + 'px', left: `calc(100% / ${layoutColNum} * ${item.x})`}">
                    <component
                        :key="$util.createUUID()"
                        :is="item.componentName"
                        :name="item.portletCodeName"
                        :context="JSON.parse(JSON.stringify(context))"
                        :viewDefaultUsage="false"
                        :isAdaptiveSize="true"
                        :viewState="viewState"
                    ></component>
                </div>
            </template>
        </div>
    </row>
</div>